<template>
	<view :style="{'height':windowHeight + 'px'}">
		<swiper :style="{'height':windowHeight + 'px'}" :vertical="true" :circular="true" :indicator-dots="false" :duration="200"
			:current="currentIndex" @change="onChange">
			<swiper-item v-for="(item,index) in list" :key="index">
				<view class="swiper_item" :style="{'height':windowHeight + 'px'}">

					<view class="swiper_wrap" :style="{'height':windowHeight + 'px'}">
						<video :id="'video' + index" class="video_tag" :style="{'height':windowHeight + 'px'}" :src="item.url" :autoplay="item.isPlay"
							:enable-progress-gesture="false" @error="videoErrorCallback" :controls="false" :loop="true"
							@click="onVideo(item,index)" :show-play-btn="false" :show-center-play-btn="false"
							@timeupdate="timeupdate">
						</video>
						
						<cover-image src="../../static/play_icon.png" class="play_icon" v-if="!item.isPlay">
						</cover-image>
						<cover-view class="cover_area">
							<!-- 用户名称、视频标题 -->
							<cover-view class="bottom_area">
								<cover-view class="user_name">@用户名称</cover-view>
								<cover-view class="video_name">这里是#视频名称#</cover-view>
							</cover-view>
							<!-- 右侧菜单 -->
							<cover-view class="right_menu">
								<cover-view class="avatar_box">
									<cover-view class="logo_box">
										<cover-image src="../../static/logo.png" class="logo"></cover-image>
									</cover-view>
									<cover-image src="../../static/follow_icon.png" class="follow_icon"></cover-image>
								</cover-view>
								
								<cover-view class="item_box">
									<cover-image src="../../static/like_icon.png" class="icon"></cover-image>
									<cover-view class="num">999</cover-view>
								</cover-view>
								
								<cover-view class="item_box">
									<cover-image src="../../static/plu_icon.png" class="icon"></cover-image>
									<cover-view class="num">456</cover-view>
								</cover-view>
								
								<cover-view class="item_box">
									<cover-image src="../../static/collection_icon.png" class="icon"></cover-image>
									<cover-view class="num">678</cover-view>
								</cover-view>
								
								<cover-view class="item_box">
									<cover-image src="../../static/share_icon.png" class="icon"></cover-image>
									<cover-view class="num">123</cover-view>
								</cover-view>
								
							</cover-view>
						</cover-view>
						
						
						<!-- 进度条 -->
						<view class="video_progress">
							<view class="real_time_progress" :style="{'width':item.progress + '%'}">
						
							</view>
						</view>
					</view>
					
				</view>
			</swiper-item>
		</swiper>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: uni.getSystemInfoSync().windowHeight,
				currentIndex: 0,
				list: [{
						url: "http://v6-cdn-tos.ppxvod.com/90c6167c8b529af9856f5467a2769c3c/63edaebc/video/tos/cn/tos-cn-ve-0076/f8962fa25ed9485196bbf3d23965c6a3/?a=1319&ch=0&cr=0&dr=3&lr=superb&cd=0%7C0%7C1%7C0&cv=1&br=933&bt=933&cs=0&ds=3&eid=2048&ft=k7FKQVVywSWRso80mo~hFJ4YA0pihX6o~jKJyDjqAG0P3-A&mime_type=video_mp4&qs=0&rc=ZjY2ZTM5OTQ7NWRoNDpkNkBpM2toNWQ6Zjk7ZzMzNGYzM0AtYzRfXjI1NWExYGM2NjBfYSNnYGFvcjRfcDBgLS1kMTBzcw%3D%3D&l=202302161119004E5752CDC47A863FD01B&btag=8000",
						isPlay: true,
						progress: 0,
					},

					{
						url: "http://v6-cdn-tos.ppxvod.com/cb6f845496a29e98929f20abda420e85/63edaf68/video/tos/cn/tos-cn-ve-0076/o8AkFjvBFA2DEaex0RogFGACAfgbQLIVdP6Qan/?a=1319&ch=0&cr=0&dr=3&lr=superb&cd=0%7C0%7C1%7C0&cv=1&br=1677&bt=1677&cs=0&ds=3&eid=2048&ft=k7FKQVVywSWRso80mo~hFJ4YA0piw76o~jKJyDjqAG0P3-A&mime_type=video_mp4&qs=0&rc=Ojw0ZWY7ZzZoOWQ7ZTs2ZEBpMzszZjc6ZjVpaTMzNGYzM0AxLl4yX2JfNjMxNC5eXzUzYSNoLWQucjRvb2lgLS1kMS9zcw%3D%3D&l=2023021611215142D6B285EF381C7977D8&btag=8000",
						isPlay: false,
						progress: 0,
					},
					{
						url: "http://v6-cdn-tos.ppxvod.com/5c6b315b56b2ef79c6eeb5864bd20916/63edb0b4/video/tos/cn/tos-cn-ve-0076/ooKTAfbnDIPTxbjEFkgU35B5nB6AmDN6eQOHUg/?a=1319&ch=0&cr=0&dr=3&lr=superb&cd=0%7C0%7C1%7C0&cv=1&br=789&bt=789&cs=0&ds=3&eid=2048&ft=k7FKQVVywSWRso80mo~hFJ4YA0pity6o~jKJyDjqAG0P3-A&mime_type=video_mp4&qs=0&rc=NzM7aTk0O2hkaGRpOzozPEBpMzR3ZDo6ZmtzaTMzNGYzM0A0YGExLTJgXl8xXzNgYGMxYSNeamNlcjRvM2dgLS1kMTBzcw%3D%3D&l=2023021611250264D6EBE1D99B8E7A08DF&btag=28000",
						isPlay: false,
						progress: 0,
					},
					{
						url: "http://v6-cdn-tos.ppxvod.com/d604e1c165051c83111fe2cad3985926/63edb379/video/tos/cn/tos-cn-ve-0076/owhneBNIWELHab2tIQBZDb1NNb72jUAFKAexgs/?a=1319&ch=0&cr=0&dr=3&lr=superb&cd=0%7C0%7C1%7C0&cv=1&br=600&bt=600&cs=0&ds=3&eid=2048&ft=k7FKQVVywSWRso80mo~hFJ4YA0pin.6o~jKJyDjqAG0P3-A&mime_type=video_mp4&qs=0&rc=OmdlO2Y4aWdmODw5OWRoZUBpanR1Mzg6ZjZwaTMzNGYzM0BhXzMtXjA0XmIxYmFfMTJgYSNucGhmcjRfb2pgLS1kMWFzcw%3D%3D&l=202302161139104512EC82A3C2C545DC0D&btag=8000",
						isPlay: false,
						progress: 0,
					},

					// {
					// 	url:"",
					// 	isPlay:true,
					// },
				],
			}
		},
		onShow() {
			uni.setTabBarStyle({
				color: "#ffffff",
				backgroundColor: '#000000',
			})
		},
		onHide() {
			uni.setTabBarStyle({
				color: "#cccccc",
				backgroundColor: '#FFFFFF',
			})
		},
		methods: {
			videoErrorCallback(err) {
				console.log(err)
			},
			/**
			 * @param {Object} e
			 * 切换视频
			 */
			onChange(e) {


				if (this.currentIndex < e.detail.current) { //小于 向下滑动
					uni.createVideoContext('video' + (e.detail.current - 1), this).pause();
					uni.createVideoContext('video' + (e.detail.current), this).play();
				} else {
					uni.createVideoContext('video' + (e.detail.current + 1), this).pause();
					uni.createVideoContext('video' + (e.detail.current), this).play();
				}
				this.currentIndex = e.detail.current;
				this.list[this.currentIndex].isPlay = true;

				if (this.currentIndex == this.list.length - 2) {
					this.list = this.list.concat([{
							url: "http://v6-cdn-tos.ppxvod.com/160fc6c8952a3e44d44735c1acc75978/63edb3c1/video/tos/cn/tos-cn-ve-0076/o4Qs2iHNYxhSHhASAozt9IfooJP9QAGIVhBBUC/?a=1319&ch=0&cr=0&dr=3&lr=superb&cd=0%7C0%7C1%7C0&cv=1&br=784&bt=784&cs=0&ds=3&eid=2048&ft=k7FKQVVywSWRso80mo~hFJ4YA0pir06o~jKJyDjqAG0P3-A&mime_type=video_mp4&qs=0&rc=Zmk0MzVoO2doPGc6ZGdnM0BpamY2dzk6ZmtqaTMzNGYzM0BiMl9jXl9fNS4xLjM0MDNgYSMwb2lecjQwNWpgLS1kMS9zcw%3D%3D&l=202302161140213333971A2407E57A05B6&btag=8000",
							isPlay: false,
							progress: 0,
						},

						{
							url: "http://v3-cdn-tos.ppxvod.com/8bcdd026cf48b7ce9823067967d0edee/63edb3d0/video/tos/cn/tos-cn-ve-0076/okHgfqT4A20EkuDjxunBAeSkVDUBIQ8qKzF6bn/?a=1319&ch=0&cr=0&dr=3&lr=superb&cd=0%7C0%7C1%7C0&cv=1&br=2044&bt=2044&cs=0&ds=3&eid=2048&ft=k7FKQVVywSWRso80mo~hFJ4YA0pi~06o~jKJyDjqAG0P3-A&mime_type=video_mp4&qs=0&rc=NDw2ODszPDU0ZzNpNTtnN0BpamQ4dWU6Zmg3aTMzNGYzM0AvMWJiXjBgNWAxMzEvYV4yYSNncXFqcjQwbmlgLS1kMTBzcw%3D%3D&l=202302161140326F01E4EED63E487A8193&btag=10000",
							isPlay: false,

						},
						{
							url: "http://v3-cdn-tos.ppxvod.com/ab8ac44cfdc7d6183dbe98b4165ef883/63edb411/video/tos/cn/tos-cn-ve-0076/oQITCqfMKoAejNDGV99hqbgBMADSTEnfPQZGDe/?a=1319&ch=0&cr=0&dr=3&lr=superb&cd=0%7C0%7C1%7C0&cv=1&br=774&bt=774&cs=0&ds=3&eid=2048&ft=k7FKQVVywSWRso80mo~hFJ4YA0piJ_6o~jKJyDjqAG0P3-A&mime_type=video_mp4&qs=0&rc=aGY8ZjdnMzc2ZzM4NTtnaUBpM2tscjw6ZmlpaTMzNGYzM0BiNGEzLi5gNS4xLy5gMWE0YSNnaW0xcjRvNWlgLS1kMTBzcw%3D%3D&l=202302161140488D9D807D7AE4733BB036&btag=28000",
							isPlay: false,
							progress: 0,
						},
					]);
				}


			},
			onVideo(item, index) {
				if (item.isPlay) {
					item.isPlay = false;
					uni.createVideoContext('video' + index, this).pause();
				} else {
					item.isPlay = true;
					uni.createVideoContext('video' + index, this).play();
				}

			},
			timeupdate(e) {
				this.list[this.currentIndex].progress = (e.detail.currentTime / e.detail.duration) * 100;

			},
		}
	}
</script>

<style>
	page {
		background: #000;
	}
</style>
<style scoped lang="scss">
	.swiper_item {
		position: relative;
	}

	.video_progress {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2px;
		height: 4rpx;
		background: #0c0c0c;

		.real_time_progress {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: 0;
			height: 100%;
			background: #1b1b1b;
			z-index: 99;
		}
	}

	.swiper_wrap {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: end;

		.video_tag {
			width: 100%;
			
		}
		.play_icon {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 80rpx;
			height: 80rpx;
			opacity: 0.4;
		}
		.cover_area{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx;
			display: flex;
			flex-direction: row;
			pointer-events: auto;
		}
		.bottom_area {
			// position: absolute;
			// left: 30rpx;
			// bottom: 30rpx;
			width: calc(100% - 140rpx);
			color: #fff;
			z-index: 99;
		
			.user_name {
				font-size: 32rpx;
			}
		
			.video_name {
				margin-top: 20rpx;
				font-size: 28rpx;
			}
		}
		
		.right_menu {
			// position: absolute;
			right: 0;
			bottom: 20rpx;
			width: 140rpx;
			min-height: 140rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
		
			.avatar_box {
				position: relative;
				height: 160rpx;
		
				.follow_icon {
					position: absolute;
					bottom: 6rpx;
					left: 0;
					right: 0;
					width: 60rpx;
					height: 60rpx;
					margin: auto;
					z-index: 99;
					&::after{
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						width: 50%;
						height: 50%;
						background: #fff;
						z-index: -1;
						border-radius: 50%;
					}
				}
				.logo_box {
					width: 100rpx;
					height: 100rpx;
					background: #fff;
					border-radius: 50%;
					padding: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				
					.logo {
						width: calc(100% - 20rpx);
						height: calc(100% - 20rpx);
					}
				}
			}
			
			.item_box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;
				.icon{
					width: 70rpx;
					height: 60rpx;
				}
				.num{
					font-size: 26rpx;
					color: #eee;
					margin-top: 6rpx;
				}
			}
		
		}
	}
</style>
